<template>
  <div class="home" @click="onRest">
    <custom title="会员充值" />
    <div class="vipImg">
      <div class="flex justify-sb">
        <div class="flex">
          <img src="@/assets/registerMember/shopIcon.png" alt="" class="shopImg" />
          <div class="exceedOne vipTit">{{ mermberInfo.merchantName }}</div>
        </div>
        <div class="jFBox">
          <img src="@/assets/registerMember/collection.png" alt="" class="jFImg" />
          <div>积分 : {{ mermberInfo.score }}</div>
        </div>
      </div>
      <div class="rich">
        <div>卡余额</div>
        <div class="richPrice">¥{{ mermberInfo.balance/100 }}</div>
      </div>
      <div class="cardNum">卡号：{{ mermberInfo.cardNo }}</div>
    </div>
    <div class="priceBox">
      <div v-for="(item, index) in activityList" :key="index" :class="['price', item.isSelect?'priceAct':'']" @click="onSelePrice(index)">
        <div class="priceTit">充 {{ item.rechargeAmt/100 }}</div>
        <div>送 {{ item.giveAmt/100 }} 元</div>
        <div v-if="item.recommend" class="priceTag">推荐</div>
      </div>
      <div :class="['price', custom.isSelect?'priceAct':'']" @click.stop="onSelePrice('custom')">
        <div class="priceTit">自定义(元)</div>
        <div v-show="priceIndex == 'custom' || custom.rechargeAmt" class="priceInput" @click="custom.isKeyboard = true">{{ custom.rechargeAmt }}</div>
        <div v-show="!custom.rechargeAmt && priceIndex != 'custom'">金额</div>
      </div>
    </div>
    <div v-show="custom.isKeyboard" class="numberbox" @click.stop>
      <NumberKey
        :is-pay="true"
        @getPay="onGetPay"
      />
    </div>
    <div class="memberButBox">
      <div class="memberBut" @click="onRecharge()">充值</div>
    </div>
  </div>
</template>

<script>
import NumberKey from '@/components/NumberKey.vue'
import custom from '@/components/custom.vue'
import { commonAjax } from 'Ajax'
export default {
  components: {
    NumberKey,
    custom
  },
  data() {
    return {
      isCheck: false,
      // priceList: [
      //   {
      //     giveAmt: '充值',
      //     rechargeAmt: '100元',
      //     recommend: false,
      //     isSelect: false
      //   }, {
      //     giveAmt: '充200',
      //     rechargeAmt: '送30元',
      //     recommend: true,
      //     isSelect: true
      //   }
      // ],
      priceIndex: '',
      custom: {
        isSelect: false,
        isKeyboard: false,
        cardConfigDetailId: '1',
        rechargeAmt: ''
      },
      mermberInfo: {},
      activityList: []
    }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      commonAjax.getMemberDetail().then(res => {
        this.mermberInfo = res
      })
      commonAjax.getActivityList().then(res => {
        const list = res
        let index = list.findIndex(i => i.recommend)
        index = index === -1 ? 0 : index
        list.forEach(i => {
          i.isSelect = false
        })
        list[index].isSelect = true
        this.activityList = list
      })
    },
    // 选择金额
    onSelePrice(num) {
      this.activityList.forEach((item, index) => {
        item.isSelect = index === num
      })
      if (num === 'custom') { // 自定义金额
        this.custom.isSelect = true
        this.custom.isFous = true
        this.custom.isKeyboard = true
      } else {
        this.custom.isSelect = false
        this.custom.isFous = false
        this.custom.isKeyboard = false
      }
      this.priceIndex = num
    },
    // 去付款
    onGetPay(val) {
      this.custom.rechargeAmt = val
    },
    // 重置
    onRest() {
      this.custom.isKeyboard = false
    },
    // 充值
    onRecharge() {
      // const { cardConfigDetailId, rechargeAmt } = this.custom.isSelect ? this.custom : this.activityList.filter(i => i.isSelect)[0]
      // if(!rechargeAmt) return // 自定义充值
      // console.log('充值id', cardConfigDetailId, rechargeAmt)
      // const params = {
      //   'cardConfigDetailId': cardConfigDetailId,
      //   'rechargeAmt': Number(rechargeAmt) * 100
      // }
      // commonAjax.sendRecharge(params).then(res => {
      //   console.log(res)
      // })
      this.$toast('充值成功~')
      setTimeout(() => {
        this.$jump({ path: '/register-success', query: { type: 'recharge' }})
      }, 3000)
    }
  }
}
</script>

<style scoped>
.vipImg{
  width: 660px;
  height: 360px;
  margin: 0 auto;
  background: url('../../assets/registerMember/vipBg.png') no-repeat;
  background-size: 100% 100%;
}
.shopImg{
  width: 84px;
  height: 84px;
  display: block;
  margin: 46px 20px 0 48px;
}
.vipTit{
  font-size: 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  color: #704B0D;
  margin-top: 65px;
}

.memberButBox{
  position: fixed;
  bottom: 30px;
  width: 100%;
  z-index: 1;
}
.memberBut{
  width: 630px;
  height: 100px;
  background: linear-gradient(90deg, #EF3814 0%, #FF8D13 100%);
  box-shadow: 0px 6px 11px 1px #FAD9C6;
  border-radius: 20px;
  margin: 0 auto;
  color: #fff;
  font-size: 34px;
  line-height: 100px;
  text-align: center;
}
.jFBox{
  min-width: 226px;
  height: 62px;
  background: linear-gradient(90deg, #303030 23%, #4D4C4C 96%);
  border-radius: 31px 0px 0px 31px;
  display: flex;
  align-items: center;
  margin-top: 57px;
  font-size: 26px;
  font-weight: 500;
  color: #FAE1BB;
  margin-right: 10px;
}
.jFImg{
  width: 36px;
  height: 36px;
  display: block;
  margin-left: 18px;
  margin-right: 13px;
}
.rich{
  margin-top: 58px;
  margin-left: 48px;
  font-size: 24px;
  color: #000000;
}
.richPrice{
  font-size: 30px;
  font-weight: 600;
}
.cardNum{
  margin-top: 10px;
  line-height: 1rem;
  margin-left: 48px;
  font-size: 24px;
  color: #A08269;
}
.priceBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px 60px;
}
.price{
  width: 302px;
  height: 196px;
  background: #FFFFFF;
  border: 2px solid #D7D7D7;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  color: #666666;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
}
.priceTit{
  font-weight: 400;
  font-size: 30px;
}
.priceInput{
  height: 40px;
  border-bottom: 2px solid #fff;
  padding: 10px 20px;
}
.priceAct{
  width: 306px;
  height: 200px;
  background: linear-gradient(-45deg, #EF3814 0%, #FF8D13 100%);
  box-shadow: 0px 6px 11px 1px #F3D0C4;
  border: none;
  color: #fff;
}
.priceTag{
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 22px;
  background: #DD3142;
  border-radius: 20px 0px 20px 0px;
  font-size: 26px;
  color: #FFFFFF;
}
.numberbox{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
</style>
